<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <script>

        const user = 'yy' ;

        // localStorage 相当于把数据存在浏览器中   是cookie的升级版

        // 数据本质上是存储在电脑的某个地方
        //     只有当前这台电脑可以访问这个数据
        //     只有当前这个浏览器可以访问这个数据
        //     只有这个网站可以访问数据(域名必须是一样的)
        //         live server   或者   open in default browser 保留一个

        // 在不同的页面访问这个变量


        // localStorage
        //    属性  length
        //    方法
        //       setItem()
        //       getItem()
        //       removeItem()
        //       key(i)
        //       clear()

        //    遍历  


        // localStorage 是一个对象
        console.log(localStorage);

        // 设置   --- 键值对的形式存数据
        localStorage.setItem('yy' , '123');
        localStorage.setItem('cc' , '222');


        // 获取键名的时候，如果获取不到  就会返回null
        // const res = localStorage.getItem('yy1');
        // console.log(res);

        // // 删除数据
        // localStorage.removeItem('yy');


        // // 清空数据
        // localStorage.clear();


        // 在使用for in  遍历的时候  所有的属性和方法都允许被遍历  
        // for(let key in localStorage) {
        //     console.log(key);
        // }

        // key(i)   获取键名的
        // console.log(localStorage.key(0));
        // console.log(localStorage.key(1));

        for(let i = 0 ; i < localStorage.length ; i++) {
            console.log(localStorage.key(i)) ;
            let key = localStorage.key(i) ;
            console.log(localStorage.getItem(key));
        }

    </script>
    
</body>
</html>